<template>
  <vue-seamless-scroll
    :data="list"
    :class-option="classOption"
    class="seamless-warp"
  >
    <div class="rank">
      <ul class="list">
        <li :key="index" v-for="(item, index) in list">
          <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
          <span>{{ item.name }}</span>
          <span>{{ item.number }}</span>
        </li>
      </ul>
    </div>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "RankingList",
  data() {
    return {};
  },
  computed: {
    classOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  props: ["title", "list"],
  components: { vueSeamlessScroll },
};
</script>

<style lang="less" scoped>
.seamless-warp {
  width: 100%;
  height: 390px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
.rank {
  overflow: hidden;
  padding: 0 32px 0px 0px;
  .list {
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
    li {
      margin-top: 16px;
      span {
        color: @text-color-second;
        font-size: 14px;
        line-height: 22px;
      }
      span:first-child {
        background-color: @layout-bg-color;
        border-radius: 20px;
        display: inline-block;
        font-size: 12px;
        font-weight: 600;
        margin-right: 24px;
        height: 20px;
        line-height: 20px;
        width: 20px;
        text-align: center;
      }
      span.active {
        background-color: #314659 !important;
        color: @text-color-inverse !important;
      }
      span:last-child {
        float: right;
      }
    }
  }
}
</style>
